<template>
  <div class="app">
    <div class="top-view flex align between">
      <div style="flex: 1">
        <img
          class="logo"
          :src="schoolInfo.logo"
          @click="onRefresh"
        />
      </div>
      <div
        class="app-title"
        style="flex: 1"
      >
        <p>教室：{{ appTitle?.room }}</p>
        <p>上课班级：{{ appTitle?.clazz || '-' }}</p>
      </div>
      <div style="flex: 1; text-align: right">
        <!-- <div>晴 24°</div>
        <div>星期一</div>
        <div>2024年4月14日</div> -->
      </div>
    </div>
    <div class="app-conetnt">
      <router-view />
    </div>
    <div class="btom-nav">
      <div class="flex align btom-nav-con">
        <div
          class="nav-item"
          v-for="(item, index) in list"
          :key="index"
          @click="toUrl(item.path)"
        >
          <img
            :src="item.img_a"
            v-if="item.path == pathA"
          />
          <img
            :src="item.img"
            v-else
          />
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { clazz } from "@/api/apiData";
import { onMounted, ref, watch, provide } from "vue";
import { useRoute, useRouter } from "vue-router";
const Route = useRoute();
const Router = useRouter();
const appTitle = ref({});
const setAppTitle = (room, clazz) => {
  appTitle.value = { room, clazz };
};
const deviceDetail = ref({});
const setDeviceDetail = (data) => {
  deviceDetail.value = data;
  localStorage.setItem("device", JSON.stringify(data || {}));
};
const getDeviceDetail = (getClazz = true) => {
  const deviceStr = localStorage.getItem("device");
  deviceDetail.value = (deviceStr && JSON.parse(deviceStr)) || {};
  setAppTitle(
    deviceDetail.value?.room?.name + " " + deviceDetail.value?.clazz?.name
  );
  if (getClazz) {
    getApiClazzDetail();
  }
  return deviceDetail.value;
};
/* S 学校信息 S */
const schoolInfo = ref({});
const getSchoolInfo = () => {
  clazz.schoolInfo().then(({ data }) => {
    schoolInfo.value = data;
  });
};
/* E 学校信息 E */

/* S 教室信息 S */
const clazzDetail = ref({});
const getApiClazzDetail = () => {
  const clazz_id = deviceDetail.value?.clazz_id;
  if (!clazz_id) {
    return;
  }
  clazz.detail({ clazz_id }).then(({ code, data }) => {
    if (code !== 1) {
      return;
    }
    clazzDetail.value = data;
  });
};
/* E 教室信息 E */

/* S 菜单 S */
const list = ref([
  /*  {
    name: "首页",
    img: require("@/assets/icon1.png"),
    img_a: require("@/assets/icon1-a.png"),
    path: "/index",
  }, */
  {
    name: "校园",
    img: require("@/assets/icon2.png"),
    img_a: require("@/assets/icon2-a.png"),
    path: "/school",
  },
  {
    name: "教室",
    img: require("@/assets/icon3.png"),
    img_a: require("@/assets/icon3-a.png"),
    path: "/class",
  },
  {
    name: "教师",
    img: require("@/assets/icon8.png"),
    img_a: require("@/assets/icon8-a.png"),
    path: "/teacher",
  },
  {
    name: "课程",
    img: require("@/assets/icon4.png"),
    img_a: require("@/assets/icon4-a.png"),
    path: "/course",
  },
  {
    name: "考勤",
    img: require("@/assets/icon9.png"),
    img_a: require("@/assets/icon9-a.png"),
    path: "/attendance",
  },
  /*  {
    name: "设备",
    img: require("@/assets/icon5.png"),
    img_a: require("@/assets/icon5-a.png"),
    path: "/equipment",
  }, 
  {
    name: "成绩",
    img: require("@/assets/icon6.png"),
    img_a: require("@/assets/icon6-a.png"),
    path: "/performance",
  },
  {
    name: "我的",
    img: require("@/assets/icon7.png"),
    img_a: require("@/assets/icon7-a.png"),
    path: "/mine",
  },*/
]);
const pathA = ref("/index");
const toUrl = (path) => {
  Router.push(path);
};
/* E 菜单 E */

const onRefresh = () => {
  window.location.reload(true);
};

watch(
  () => Route.path,
  (newPath) => {
    pathA.value = newPath;
  }
);

provide("global-stroe", {
  setAppTitle,
  deviceDetail,
  setDeviceDetail,
  schoolInfo,
  clazzDetail,
  getApiClazzDetail,
});

onMounted(() => {
  getDeviceDetail();
  getSchoolInfo();
});
</script>
<style
  lang="less"
  scoped
>
.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .top-view {
    background: #81c4ff;
    padding: 15px 20px;
    color: white;
    min-height: 136px;

    .logo {
      max-width: 100%;
      height: auto;
    }
  }
  &-conetnt {
    flex: 1;
    overflow: hidden;
    /* box-sizing: border-box; */
    /* border: 1px solid red; */
  }

  &-title {
    font-size: 48px;
    text-align: center;
  }
  .btom-nav {
    width: 100%;
    background: #8bc8ff;
    padding: 21px 0px;
  }
  .btom-nav-con {
    margin: 0 246px;
    justify-content: space-around;
  }
}
</style>
<!-- 通用样式 -->
<style>
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
html {
  background: #e8f4ff;
}
/* .main {
  padding-bottom: 200px;
} */
.title {
  color: white;
  border-radius: 8px 8px 0px 0px;
  font-size: 32px;
  padding: 11px;
  text-align: center;
}
* {
  margin: 0;
  padding: 0;
}
.flex {
  display: flex;
}
.align {
  align-items: center;
}
.between {
  /* 2边对齐 */
  justify-content: space-between;
}
.absolute {
  position: absolute;
}

.nav-item {
  text-align: center;
  color: white;
  font-size: 28px;
}
.nav-item img {
  width: 68px;
  height: 68px;
}
.form .el-date-editor .el-range__icon {
  font-size: 30px;
}
.form .el-date-editor .el-range-input,
.el-date-editor .el-range-separator,
.el-textarea__inner {
  font-size: 24px !important;
}
.form .el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
  width: 100% !important;
  height: 50px !important;
}
.form .el-input__inner {
  font-size: 24px !important;
  padding: 30px 25px;
}
</style>
